<template>
  <div style="background-color: #f0f0f0" v-if="data">
     <!-- 回顶 -->
     <top></top>
    <router-view></router-view>
    <!-- 轮播图 -->
    <div>
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        style="height: 56vw"
      >
      <!-- <van-swipe-item 
          ><img  v-for="({ img3 }, i) of imgata"
            :key="i" v-src="img3"
        /></van-swipe-item> -->
        <van-swipe-item
          ><img src=" http://localhost:3000/images/Carousel/main_visual_1.jpg"
        /></van-swipe-item>
        <van-swipe-item
          ><img src=" http://localhost:3000/images/Carousel/main_visual_4.jpg"
        /></van-swipe-item>
        <van-swipe-item
          ><img src=" http://localhost:3000/images/Carousel/main_visual_3.jpg"
        /></van-swipe-item>
        <van-swipe-item
          ><img src=" http://localhost:3000/images/Carousel/main_visual_2.jpg"
        /></van-swipe-item>
        <van-swipe-item
          ><img src=" http://localhost:3000/images/Carousel/main_visual_5.jpg"
        /></van-swipe-item>
      </van-swipe> 
    </div>
    <!-- 标题字体 -->
    <div class="header-l">
      <h1>Licorne purer</h1>
      <p>The noble, elegant and pure love of the</p>
      <p>unicorn guardian reflects the future and the afterlife</p>
    </div>
    <!-- 第一楼类容 -->
    <div class="daohang">
      <van-tabs v-model="active">
        <van-tab title="西式婚纱">
          <div class="phone-a" style="height: 40vh">
            <img v-src="data.results[num].img1" @click="goto(num)" />
            <img v-src="data.results[num_a].img1" @click="goto(num_a)" />
          </div>
          <div class="ziti-a">
            <p style="margin-top: 0vw">Licorne purer</p>
            <p style="padding-top: 0vw">Pure and noble love</p>
          </div>
        </van-tab>
        <van-tab title="中式婚纱">
          <div class="phone-b" style="height: 40vh">
            <img v-src="data.results[num_b].img1" @click="gotoz(num_b)" />
            <img v-src="data.results[num_c].img1" @click="gotoz(num_c)" />
          </div>
          <div class="ziti-a">
            <p style="margin-top: 0vw">Licorne purer</p>
            <p style="margin-top: 0vw">Elegant and generous</p>
          </div>
        </van-tab>
        <van-tab title="个性定制">
          <div class="phone-c" style="height: 40vh">
            <img v-src="data.results[num_d].img1" @click="gotod(num_d)" />
            <img v-src="data.results[num_e].img1" @click="goto(num_e)" />
          </div>
          <div class="ziti-a">
            <p style="margin-top: 0vw">Licorne purer</p>
            <p style="margin-top: 0vw">Uniqueness and individuality</p>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 二楼内容 -->
    <div>
      <div id="service">
        <div class="ziti-b">
          <h2 style="margin-bottom: 0vw; color: balck">Exclusive service</h2>
          <h2 style="margin-top: 0vw; background-color: white">专享服务</h2>
        </div>

        <div class="lou-a">
          <swiper :slides-per-view="3" :options="swiperOption">
            <swiper-slide class="louxia-a">
              <img v-src="data.results[num_e].img1" @click="goto(num_e)" />
              <img v-src="data.results[num_d].img1" @click="gotod(num_d)" />
              <span style="color: balck">Licorne purer</span>
              <br />
              <span style="font-size: 15px">订制专属你的婚纱</span>
              <div style="padding: 0 2vw">
                <span style="font-size: 9px; color: #333232"
                  >一对一订制个性婚纱穿出属于你的独特风格</span
                >
              </div>
            </swiper-slide>
            <swiper-slide>
              <img src="http://localhost:3000/images/ring/ring_01.jpg" alt="" />
              <img src="http://localhost:3000/images/ring/ring_04.jpg" alt="" />
              <span style="color: balck">Licorne purer</span>
              <br />
              <span style="font-size: 15px">婚礼配饰订制</span>
              <div style="padding: 0px 2vw">
                <span style="font-size: 9px; color: #333232"
                  >独特设计师一对一服务</span
                >
              </div>
            </swiper-slide>
            <swiper-slide>
              <img v-src="data.results[num_d].img1" @click="gotoz(num)" />
              <img v-src="data.results[num_b].img1" @click="gotoz(num_b)" />
              <span style="color: balck">Licorne purer</span>
              <br />
              <span style="font-size: 15px">独立摄影</span>
              <div style="padding: 0px 2vw">
                <span style="font-size: 9px; color: #333232"
                  >独立摄影师给你打造不同的视觉效果</span
                >
              </div>
            </swiper-slide>
            <swiper-slide>
              <img
                src="http://localhost:3000/images/Photography/Photography_1.jpg"
                alt=""
              />
              <img
                src="http://localhost:3000/images/Photography/Photography_2.jpg"
                alt=""
              />
              <img
                src="http://localhost:3000/images/Photography/Photography_5.jpg"
                alt=""
              /><img
                src="http://localhost:3000/images/Photography/Photography_3.jpg"
                alt=""
              />
              <span>Licorne purer</span>
              <br />
              <span style="font-size: 15px">个性化场地</span>
              <div style="padding: 0px 2vw">
                <span style="font-size: 9px; color: #333232"
                  >一对一订制婚礼拍摄场地</span
                >
              </div>
            </swiper-slide>
            <swiper-slide>
              <img
                src="http://localhost:3000/images/Store/s1.jpg"
                alt=""
                style="margin-top: 5vh"
              />
              <img
                src="http://localhost:3000/images/Wedding/Chinese/chinese_05/001.jpg"
                style="margin-bottom: 5vh"
              />
              <span>Licorne purer</span>
              <br />
              <span style="font-size: 15px; line-height: 4vh">个人中心</span>
              <div style="padding: 0px 2vw">
                <span style="font-size: 9px; color: #333232"
                  >多元素会员权利</span
                >
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
    
    <!-- 猜你喜欢 -->
    <Guesst></Guesst>
    <!-- 三楼广告图 -->
    <guanggao></guanggao>
   
  </div>
</template>

<script>
import Guanggao from "@/components/Guanggao.vue";
import MyHeader from "@/components/MyHeader.vue";
import MyFooter from "@/components/MyFooter.vue";
import Guesst from "@/components/Guesst.vue";
import Top from "@/components/Top.vue";
export default {
  components: { MyHeader, MyFooter, Guanggao, Guesst, Top },
  data() {
    return {
      num: 0,
      num_a: 0,
      num_b: 0,
      num_c: 0,
      num_d: 0,
      num_e: 0,
      data: null,
      imgdata:null,
      active: 0,
      swiperOption: {
        effect: "coverflow",
        loop: true,
        slidesPerView: 3,
        slidesPerGroup: 1,
        autoplay: {
          delay: 1000, //1秒切换一次
        },
      },
    };
  },
  mounted() {
    this.number();
    this.axios.get("img_detail").then((res) => {
      console.log("图片", res);
      this.data = res.data;
    });
    this.axios.get("img_syzs").then((res) => {
      console.log("轮播图",res);
      this.imgdata = res.data.results;
    });
  },
  methods: {
    number() {
      this.num = Math.floor(Math.random() * 4);
      this.num_a = Math.floor(Math.random() * (10 - 5) + 5);
      this.num_b = Math.floor(Math.random() * (29 - 19 + 1) + 20);
      this.num_c = Math.floor(Math.random() * (29 - 19 + 1) + 20);
      this.num_d = Math.floor(Math.random() * (20 - 10 + 1) + 10);
      this.num_e = Math.floor(Math.random() * (20 - 10 + 1) + 10);
    },
    //个性定制
    goto(index) {
      console.log("index", index);
      return this.$router.push("/westernDetail?lid=" + index);
    },
    gotoz(lid) {
      console.log("index", lid);
      return this.$router.push("/westerndetail?lid=" + lid);
    },
    gotod(name) {
      console.log("index", name);
      return this.$router.push("/westerndetail?lid=" + name);
    },
    showbtn(){
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if( this.scrollTop > 900){
        this.showBtn = true;
      }else{
        this.showBtn = false;
      }
    },
  },
};
</script>
<style scoped src="../../assets/CSS/index.css">
</style>
<style scoped src="../../assets/CSS/like.css">
</style>
